<template>
	<view class="topic-container">
		
		<topiclist
			v-for="topic in topics"
			:key="topic.id"
			:img_url="topic.img_url"
			:content="topic.content"
		></topiclist>
		
		<view class="addtopic" @click="toaddtopic">
			<uni-icons class="plusicon" type="plusempty" color="#fff" size="32"></uni-icons>
		</view>
		
	</view>
</template>

<script>
	import topiclist from '../../components/Topiclist.vue'
	
	export default {
		name: 'topic',
		data() {
			return {
				topics: []
			}
		},
		methods: {
			async getTopics() {
				const res = await this.$myRequest({
					url: '/post/getpost',
					method: 'POST'
				})
				this.topics = res.data.res
				console.log(this.topics)
			},
			toaddtopic() {
				uni.navigateTo({
					url: '/pages/topic/addtopic'
				})
			}
		},
		components: {
			topiclist
		},
		onLoad(options) {
			this.getTopics()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		.topic-container {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
			.addtopic {
				position: fixed;
				bottom: 200rpx;
				right: 40rpx;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #aa0000;
				text-align: center;
				.plusicon {
					line-height: 100rpx;
				}
			}
		}
	}
</style>
